<template>
  <div class="panel-wrapper" :class="sceneStore.mapPanelVisible ? 'active' : ''">
    <div class="panel-inner">
      <div class="panel-handler" @click="toggleVisible">
        <SvgIcon icon-class="ic_关闭" />
      </div>
      <div class="panel">
        <div class="panel-header">在线地图</div>
        <div class="panel-search">
          <el-input v-model="keyword" placeholder="请输入关键词">
            <template #suffix>
              <SvgIcon icon-class="ic_搜索" />
            </template>
          </el-input>
        </div>
        <div class="panel-body">
          <div class="panel-body-left">
            <div
              class="sidebar-item"
              v-for="item in mapCategory"
              :key="item.key"
              :class="item.key === activeKey ? 'active' : ''"
              @click="() => setActive(item.key)"
            >
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="panel-body-right">
            <div class="grid-wrap">
              <div
                class="grid-item"
                v-for="(list, index) in mapOnlineList"
                :key="index"
                @click="mapSel(list)"
              >
                <div class="icon-wrap">
                  <img
                    class="icon"
                    :src="require(`@/assets/png/online-map/${list.icon}.png`)"
                    alt=""
                  />
                  <SvgIcon
                    v-if="sceneStore.onlineMapSels.includes(list.dataSourceUrl)"
                    icon-class="ic_选中"
                  />
                  <SvgIcon v-else icon-class="ic_未选中" />
                </div>
                <div class="title">{{ list.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import api from '@/api';
import { useRequest } from '@jl/common/composable';
import { mapListMock } from '@/mock/scene';
import { getService, destroyLayer } from '@/service';
import { cloneDeep } from 'lodash';
import { deleteTreeNode, flattenTreeIterative } from '@/utils';
import { display } from 'html2canvas/dist/types/css/property-descriptors/display';

defineOptions({
  name: 'SceneMap',
});

const mapCategory = [
  {
    key: 'map',
    title: '地图',
  },
  {
    key: 'road',
    title: '道路',
  },
  {
    key: 'terrain',
    title: '地形',
  },
  {
    key: 'region',
    title: '行政区',
  },
];

const keyword = ref('');
const activeKey = ref('map');
const sceneStore = useSceneStore();

const toggleVisible = () => {
  sceneStore.mapPanelVisible = !sceneStore.mapPanelVisible;
};
const setActive = (key: string) => {
  activeKey.value = key;
};

const { data: mapList, run: getMapList } = useRequest(api.scene.getMapList, mapListMock);

const mapOnlineList = computed(() => {
  if (activeKey.value === 'map') {
    return mapList.value.filter((item: any) => item.name.indexOf(keyword.value) > -1);
  }
  return [];
});

function mapSel(list: API.Scene.Map) {
  if (sceneStore.onlineMapSels.includes(list.dataSourceUrl)) {
    const index = sceneStore.onlineMapSels.findIndex((item: string) => item === list.dataSourceUrl);
    const layerIndex = sceneStore.layerList.findIndex(
      (item: API.Scene.ILayer) =>
        item.type === 'imageLayer' && item.json.dataSourceUrl === list.dataSourceUrl
    );
    // 刪除图层文件夹中的资源
    const layerTree = cloneDeep(sceneStore.layerTree);
    const layerList = flattenTreeIterative(layerTree);
    const layers: any = layerList.filter(
      (v: any) => v.code === sceneStore.layerList[layerIndex].code
    );
    deleteTreeNode(sceneStore.layerTree, layers[0].fe_id, {
      id: 'fe_id',
    });
    sceneStore.onlineMapSels.splice(index, 1);
    destroyLayer(sceneStore.layerList[layerIndex]);
    sceneStore.layerList.splice(layerIndex, 1);
  } else {
    sceneStore.onlineMapSels.push(list.dataSourceUrl);
    // const zIndex: number = getLayerMaxIndex(sceneStore.layerList);
    sceneStore.layerList.unshift({
      code: Math.random().toString().split('.')[1],
      show: true,
      json: list,
      name: list.name,
      layerName: list.name,
      desc: '',
      type: 'imageLayer',
    });
  }
}

onMounted(() => {
  getMapList();
});
</script>

<style lang="less" scoped>
.panel-wrapper {
  position: absolute;
  top: 0;
  left: calc(100vw - 336px);
  width: 336px;
  height: 100%;
  background: #0a0b0d;
  transition: left 0.4s ease-out;
  z-index: 2;
  .panel-inner {
    position: relative;
    height: 100%;
    .panel-handler {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 18px;
      border-radius: 4px;
      background: var(--el-color-primary);
      cursor: pointer;
    }
    .panel {
      height: 100%;
      overflow-y: auto;
      .panel-header {
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        text-align: center;
        background: #2e343c;
      }
      .panel-search {
        padding: 10px;
        background: #171a1f;
        --el-fill-color-blank: #202329;
        --el-border-color: rgba(69, 72, 81, 0.6);
        --el-text-color-regular: #fff;
        .el-input__inner ::placeholder {
          color: #9a9a9a;
        }
      }
      .panel-body {
        display: flex;
        height: calc(100% - 80px);
        .panel-body-left {
          width: 78px;
          background: #14161a;
          overflow-y: auto;
          .sidebar-item {
            width: 100%;
            padding: 15px 10px 15px 18px;
            color: #9a9a9a;
            cursor: pointer;
            &.active {
              color: var(--el-color-primary);
              background: #0a0b0d;
            }
          }
        }
        .panel-body-right {
          flex: 1;
          padding: 20px 20px 20px 16px;
          overflow-y: auto;
          .grid-wrap {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            .grid-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
              .icon-wrap {
                position: relative;
                .svg-icon {
                  font-size: 16px;
                  margin-right: 0px;
                  position: absolute;
                  top: 60px;
                  right: 9px;
                }
              }
              .icon {
                width: 84px;
              }
              .title {
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
